<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v3.2.8/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<style>
		.login-page {
			background-image: linear-gradient(180deg, #fcffbc 0%, #a1bafd 100%);
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.login-title {
			font-size: 20px;
			margin-left: 90px;
		}

		.box-card {
			height: 500px;
			width: 410px;
			margin-left: 100px;
		}

		#codeCheck {
			width: 300px;
		}

		.code {
			font-family: Arial, 宋体;
			font-style: italic;
			color: green;
			border: 0;
			padding: 2px 3px;
			letter-spacing: 3px;
			font-weight: bolder;
		}

		#checkCode {
			margin-bottom: -10px;
			margin-left: 150px;
			width: 60px;
			height: 40px;
		}
		.el-link{
			margin-left: 100px;
		}
	</style>
	<body>
		<div id="app">
			<template>
				<div class="login-page">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<h2>欢迎注册</h2>
							<span class="login-title">Element后台管理系统</span>
						</div>
						<div class="login-form">
							<el-form :model="form" :rules="loginRules" ref="loginForm">
								<el-form-item prop="uName">
									<el-input clearable type="text" v-model="form.uname" auto-complete="off" placeholder="请输入用户名">
										<template slot="prepend"><i style="font-size:20px"
												class="el-icon-user"></i></template>
									</el-input>
								</el-form-item>
								<el-form-item prop="uPwd">
									<el-input show-password clearable type="text" v-model="form.upwd" auto-complete="off" placeholder="请输入密码">
										<template slot="prepend">
											<i style="font-size:20px" class="el-icon-key"></i></template>
									</el-input>
								</el-form-item>
								<el-form-item prop="codeCheck">
									<!--验证码-->
									<el-input clearable type="text" v-model="form.codeCheck" id="codeCheck" placeholder="请输入验证码">
										<template slot="prepend"><i style="font-size:20px"
												class="el-icon-chat-dot-square"></i></template>
									</el-input>
									<input type="button" id="checkCode" class="code" style="width:60px"
										@click="createCode()">
								</el-form-item>
								<el-form-item>
									<el-link :underline="false" type="primary" href="login.html">-----已有账号,去登录-----</el-link>
								</el-form-item>
								<el-form-item>
									<el-button style="width:100%;" type="primary" @click="handleRegist" :plain="true"
										:loading="loading">注册</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-card>
				</div>
			</template>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				loading: false,
				form: {
					uname: '',
					upwd: '',
					codeCheck: ''
				},
				loginRules: {
					uname: [{
						required: true,
						message: '请输入账户',
						trigger: 'blur'
					}],
					upwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					codeCheck: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				},
				code: ''
			},
			methods: {
				// 验证码
				createCode() {
					code = new Array();
					var codeLength = 4; //验证码的长度
					var checkCode = document.getElementById("checkCode");
					checkCode.value = "";
					var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j',
						'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
					for (var i = 0; i < codeLength; i++) {
						var charIndex = Math.floor(Math.random() * 32);
						code += selectChar[charIndex];
					}
					if (code.length != codeLength) {
						createCode();
					}
					checkCode.value = code;
				},
				handleRegist() {
					this.$refs.loginForm.validate().then(() => {
						var that = this;
						this.loading = true;
						// 模拟异步请求后台接口 登录操作
						setTimeout(() => {
							if (that.form.codeCheck != code) {
								that.$message.error('验证码错误!');
								this.loading = false;
								this.createCode();
								return; // 验证码错误，直接返回，不执行后续逻辑
							}
							axios.post(API + "regist", that.form).then(function(res) {
								console.log(res.data);
								that.loading = false; // 隐藏 table的 loading
								if (res.data == "注册成功") {
									that.$message({
										type: 'success',
										message: "注册成功",
									});
									location.href = "login.html"
								} else {
									that.$message.error('注册失败!');
								}
							}).catch(err => {
								console.log(err);
							});
							this.loading = false;
						}, 600)
					}).catch((error => {
						this.$message({
							message: '输入错误！',
							type: 'warning'
						});
					}))
				}
			},
			mounted() {
				this.createCode(); // 确保验证码在页面完全加载后生成
			}
		})
	</script>
</html>